<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/aaa/layuiadmin/layui/css/layui.css" media="all">
    <style type="text/css">
        body{
            padding: 10px 30px;
        }
        .hide{
            display:none
        }
    </style>
</head>
<body>

<button class="layui-btn layui-btn-primary up-all">全部收起</button>
<button class="layui-btn layui-btn-primary down-all">全部展开</button>

<table class="layui-table layui-form" id="test-tree-table"></table>


<form class="layui-form" id="permissioneditform">
    <div id="permission-editlayer" style="display: none">
        <input id="employee-id" name="employeeid" type="hidden" autocomplete="off" class="layui-input">

        <div class="layui-form-item">
            <label class="layui-form-label">资源名称</label>
            <div class="layui-input-inline">
                <input type="text" id="permission-name" name="name" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
        <input type="hidden" id="permission-id" name="permissionid" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">

        <div class="layui-form-item">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="permissionedit-save">保存</button>
                </div>
            </div>
        </div>

    </div>
</form>




<script src="/aaa/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: '../layuiadmin/',
    })

    layui.use(['treetable','form','table'],function(){
        var o = layui.$,treetable = layui.treetable;
        var form = layui.form,layer = layui.layer;
        var treeTable;

        o.ajax({
            url:'/aaa/per/getPermission',
            type:'POST',
            success:function (data) {
                treeTable= treetable.render({
                    elem: '#test-tree-table',
                    data: data,
                    field: 'title',
                    cols: [
                        {
                            field: 'title',
                            title: '标题',
                            width: '30%',
                        },{
                            field: 'perdesc',
                            title: '详情',
                            width: '30%',
                        },
                        {
                            field: 'id',
                            title: 'ID',
                            width: '20%'
                        },
                        {
                            field: 'pid',
                            title: '父ID',
                            width: '20%',
                        },
                        {
                            title: 'state',
                            width: '20%',
                            template: function(item){
                                if(item.state==0){
                                    return '<input type="checkbox" value='+item.id+' checked lay-skin="switch" lay-filter="status" lay-text="开启|关闭">';
                                }else{
                                    return '<input type="checkbox" value='+item.id+' lay-skin="switch" lay-filter="status" lay-text="开启|关闭">';
                                }

                            }
                        },
                        {
                            field: 'actions',
                            title: '操作',
                            width: '30%',
                            template: function(item){
                                var tem = [];
                                /*if(item.pid == 0){
                                    tem.push('<a class="add-child" lay-filter="add">添加子级</a>');
                                }*/
                                tem.push('<a class="layui-btn layui-btn-xs"  lay-filter="edit">编辑</a>');
                                /*if(item.pid > 0){
                                    tem.push('<a class="set-attr">设置属性</a>');
                                }*/
                                return tem.join(' <font>|</font> ')
                            },
                        },
                    ]
                });
            }
        });




        treetable.on('treetable(add)',function(data){
            layer.msg('添加操作');
            console.dir(data);
        });

        treetable.on('treetable(edit)',function(data){console.log(data);
            layer.open({
                type: 1,
                title:'编辑资源',
                content: o('#permission-editlayer')
            });
            o("#permission-id").val(data.item.id);
            o("#permission-name").val(data.item.title)
        })
        form.on('switch(status)',function(data){
            o.post({
                url:'/aaa/per/updatePerState',
                data:{
                    id:data.value
                },
            },function (data) {
                if(data.code==100){
                    layer.msg("修改成功");
                }else {
                    layer.msg("修改失败");
                }
            })
        })

        form.on('submit(permissionedit-save)', function (data) {
            var field = data.field;
            o.ajax({
                url:'/aaa/per/editPer',
                type:'POST',
                data:field,
                success:function (data) {
                    if(data.code==100){

                        layer.closeAll();

                        layer.msg("修改成功");
                        location.replace(location.href);
                    }else{

                        layer.closeAll();

                        layer.msg("修改失败");
                        location.replace(location.href);
                    }

                }
            });
            return false;
        });
        /* o.post({
             url:'/aaa/per/editPer',
             data:{
                 id:data.item.id
             },
         },function (data) {
             if(data.code==100){
                 layer.msg("修改成功");
             }else {
                 layer.msg("修改失败");
             }
         })*/

        o('.up-all').click(function(){
            treetable.all('up');
        });

        o('.down-all').click(function(){
            treetable.all('down');
        });

        o('.get-checked').click(function(){
            console.dir(treetable.all('checked'));
        })


    });
</script>
</body>
</html>
